<template>
    <n-card :bordered="false" class="proCard">

        <BasicTable :columns="columns" :request="loadDataTable" :row-key="(row: ListDataAboutLabBorrow) => row.id"
            ref="actionRef" :actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :scroll-x="1090">
        </BasicTable>

        <!-- 修改申请信息模态框 -->
        <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" title="修改申请" style="width: 1000px;">
            <n-card :bordered="false" class="mt-4 proCard" >
                <n-grid cols="1 s:1 m:3 l:3 xl:3 2xl:3" responsive="screen">
                    <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
                        <n-form :label-width="90" :model="labBorrowRef" :rules="rules" label-placement="left"
                            ref="formRef" class="py-8" style="width: 400px;">
                            <n-form-item label="起始周" path="">
                                <n-select placeholder="请选择起始周" :options="weekList"
                                    v-model:value="labBorrowRef.start_week" />
                            </n-form-item>
                            <n-form-item label="结束周" path="">
                                <n-select placeholder="请选择结束周" :options="weekList"
                                    v-model:value="labBorrowRef.end_week" />
                            </n-form-item>
                            <n-form-item label="申请节次" path="">
                                <n-select placeholder="申请节次" :options="sectionList"
                                    v-model:value="labBorrowRef.section" />
                            </n-form-item>
                            <n-form-item label="申请实验室" path="">
                                <n-select placeholder="申请实验室" :options="labNameList"
                                    v-model:value="labBorrowRef.lab_name" />
                            </n-form-item>

                            <n-form-item label="申请原因" path="remark">
                                <n-input v-model:value="labBorrowRef.reason" type="textarea" placeholder="请输入理由" />
                            </n-form-item>

                            <div style="margin-left: 170px">
                                <n-space>
                                    <n-button type="primary" @click="formSubmit">提交申请</n-button>
                                </n-space>
                            </div>
                        </n-form>
                    </n-grid-item>
                </n-grid>
            </n-card>

            <template #action>
                <n-space>
                    <n-button @click="() => (showModal = false)">取消</n-button>
                    <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
                </n-space>
            </template>
        </n-modal>


    </n-card>
</template>

<script lang="ts" setup>
import { h, reactive, ref } from 'vue';
import { BasicTable, TableAction } from '@/components/Table';

//axios 
import { getTableListAboutLabBorrow, submitFinishUsing } from '@/api/student/student';
import { columnsAboutLabBorrow, ListDataAboutLabBorrow } from './columns';

import { useRouter } from 'vue-router';
import { type FormRules, NButton, NInput, useMessage } from 'naive-ui';


const columns = ref(columnsAboutLabBorrow);



const router = useRouter();
const actionRef = ref();

const showModal = ref(false);
const formBtnLoading = ref(false);
const formParams = reactive({
    name: '',
    address: '',

    id: '',
    username: '',
    account: '',
    role: '',
    pro_rank: '',
    major: '',
    class_name: '',

});

const actionColumn = reactive({
    width: 220,
    title: '操作',
    key: 'action',
    fixed: 'right',
    render(record: any) {
        return h(TableAction as any, {
            style: 'NButton',
            actions: [
                {
                    label: '修改申请',
                    onClick: handleModifyLabborrow.bind(null, record),
                    type: 'info',
                    secondary:true,
                    ifShow: () => {
                        return isPermitBorrow(record);
                    },

                },
                {
                    label: '使用结束',
                    type: 'success',
                    onClick: handleFinishLabborrow.bind(null, record),
                    secondary:true,
                    ifShow: () => {
                        return submitFinishBorrow(record);
                    },

                },

            ],
        });
    },
});
function isPermitBorrow(record: any) {
    return record.state == 0
}

function submitFinishBorrow(record: any) {
    return record.state == 1
}



function addTable() {
    showModal.value = true;
}

var pageNum
const loadDataTable = async (res: any) => {
    pageNum = res.page

    return await getTableListAboutLabBorrow({ ...res, "pageNum": pageNum });



};

function onCheckedRow(rowKeys: any) {
    console.log(rowKeys);
}

function reloadTable() {
    actionRef.value.reload();
}

function confirmForm(e: { preventDefault: () => void; }) {
    e.preventDefault();
    formBtnLoading.value = true;
    formRef.value.validate((errors: any) => {
        if (!errors) {
            window['$message'].success('新建成功');
            setTimeout(() => {
                showModal.value = false;
                reloadTable();
            });
        } else {
            window['$message'].error('请填写完整信息');
        }
        formBtnLoading.value = false;
    });
}
// handleResetPassword
function handleModifyLabborrow(record: Recordable) {

    console.log('点击了handleModifyLabborrow', record);
   
    window['$message'].success('修改信息');


    addTable()
    //router.push({ name: 'basic-info', params: { id: record.id } });
}


function handleFinishLabborrow(record: Recordable) {
    submitFinishUsing(record)
    reloadTable();
}

function handleSubmit(values: Recordable) {
    console.log(values);
    reloadTable();
}

function handleReset(values: Recordable) {
    console.log(values);
}

function searchPerson() {
    console.log("selectOptionValue:", selectOptionValue.value)
    reloadTable()
}


// 修改用户表单
const weekList = [
    {
        label: '1',
        value: 1,
    },
    {
        label: '2',
        value: 2,
    },

];

const sectionList = [
    {
        label: '1-2',
        value: 1,
    },
    {
        label: '3-4',
        value: 2,
    },

];

const labNameList = [
    {
        label: '基础实验室',
        value: 1,
    },

];

const rules = {

};

const formRef: any = ref(null);
const message = useMessage();


let labBorrowRef = reactive({
    semester: '',

    start_week: '',
    end_week: '',

    section: '',

    lad_id: '',
    lab_name: '',



    reason: '',
    create_time: '',
});


function formSubmit() {
    formRef.value.validate((errors) => {
        if (!errors) {
            let result = labBorrowRef
            console.log(labBorrowRef)
            message.success("验证成功");
        } else {
            message.error('验证失败，请填写完整信息');
        }
    });
}

</script>

<style lang="less" scoped></style>